<template>
		<view class="location">
			<view class="page" style="text-align: center;position: relative;">
				<navigator @click="navBack" class="return-arrow">
					<img class="return-img" src="../../static/arrow.png">
				</navigator>
				<view class="service-list">会员编辑</view>		
				<view class="content">
				</view>
			</view>
			<view class="member">
				<view class="member-box van-cell-group" >
					<view class="van-cell">
						<img src="../../static/user-name.png">
						<label class="van-cell_title">姓名:</label>
						<div class="van-cell_value">
							<input type="text" maxlength="200" v-model="memberData.muNickName" class="van-field_control"></div>
						</div>
					</view>
					<view class="van-cell">
					<img src="../../static/user-sex.png">
						<label class="van-cell_title">性别:</label>
						<radio-group class="uni-list radio-list" @change="radioChange">
						    <label class="uni-list-cell uni-list-cell-pd label-list" v-for="(item,index) in radioItems" :key="item.id">
						            <radio :value="item.id" :checked=" memberData.muSex==item.id"></radio>
						            <label class="label-2-text" :for="item.id">
						                <text>{{item.value}}</text>
						            </label>
						    </label>
						</radio-group>
					</view>
					
					<!-- <view class="van-cell">
						<label class="van-cell_title">性别:</label>
						<div class="van-cell_value">
							<div class="van-field_body" v-if="memberData.muSex ==1">男</div>
							<div class="van-field_body" v-else>女</div>
						</div>
					</view> -->
					<view class="van-cell">
						<img src="../../static/user-tel.png">
						<label class="van-cell_title">手机号:</label>
						<div class="van-cell_value">
							<input type="number" maxlength="11" v-model="memberData.muMobile" class="van-field_control"></div>
	
						</div>
					</view>
					<view class="van-cell">
							<img src="../../static/user-shenfen.png">
						<label class="van-cell_title">身份:</label>
						<div class="van-cell_value">
							<div class="van-field_body">
								<select class="van-cell_value van-cell_select" v-model="memberData.alId">
									<option v-for="level in levellist" :value="level.alId">{{level.alName}}</option>
								</select>
							</div>
						</div>
					</view>
					<view class="van-cell">
						<img src="../../static/user-tag.png">
						<label class="van-cell_title">标签:</label>
						<div class="van-cell_value">
							<div class="van-field_body">
								   <multiselect v-model="member_tags" placeholder="选择用户标签" label="name" track-by="code" :options="tags" :multiple="true" :taggable="true" :searchable="false" :showLabels="false" :max-height="120">
								  <span slot="noOptions">暂无会员标签</span>
								   </multiselect>
								</div>
						</div>
					</view>
					<view class="van-cell">
							<img src="../../static/user-beizhu.png">
						<label class="van-cell_title">备注:</label>
						<div class="van-cell_value">
							<div class="van-field_body">
							<textarea type="text" maxlength="200"  v-model="memberData.muMemo" class="van-field_control" placeholder="输入会员备注"></textarea></div>
						</div>
					</view>
					<view class="submit-box van-cell" style="padding: 30px;">
						<button class="c-submit" @click="commitChange(memberData.muId)" style="margin:auto;">修改</button>
					</view>
				</view>
			</view>	
		    
		</view>	
		
</template>
<script>
import Vue from 'vue';                                                                      
import Multiselect from 'vue-multiselect'
 export default {
    components: {Multiselect},
    data() {
        return {
			memberData:[],
			levellist:[],
			mcKey:'',
			radioItems: [{
					id: '0',
					value: '女' 
			    },
			    {
    	
					id: '1',
					value: '男'
			    }
			],
			member_tags: [],
			tags: []
        };
    },
	onLoad: function(event) {
		// 初始化列表信息
		this.params =event;
		this.getMember(this.params.mcKey,this.params.userId);
		this.getTags(this.params.mcKey);
		this.mcKey = this.params.mcKey;
	},
    methods: {
		/*addTag (newTag) {
		  const tag = {
			name: newTag,
			code: newTag.substring(0, 2) + Math.floor((Math.random() * 10000000))
		  }
		  this.options.push(tag)
		  this.value.push(tag)
		},*/
		navBack(){
			uni.navigateBack();
		},
		radioChange: function(e) {
		    var checked = e.target.value
			this.memberData.muSex=checked;
		},
		getMember(mckey,userId){
			uni.showLoading({
				title: '获取信息中'
			});
		uni.request({
			url: uni.getStorageSync('api_url')+'/member/getUserInfoByUserId?mcKey='+mckey+'&userId='+userId,
			complete: (result) => {
				uni.hideLoading();
				if(result.data.code != 1){
					uni.showToast({
						title:result.data.msg
					});
				}else{
					this.memberData = result.data.data;
					this.memberData.muSex=this.memberData.muSex.toString();
					if(this.memberData.muMemo=='null'||this.memberData.muMemo==null){
						this.memberData.muMemo="";
					}
					var arr = [];
					var mutas = this.memberData.muTagsInfo;
					for (let i in mutas) {
						let o = [];
						o = {'code':mutas[i].spId,'name':mutas[i].spKey};
						arr.push(o);
					}
					this.member_tags = arr;
					this.getAgencyLevelList(mckey);
				}

				
			},
		});
		
	},
	getAgencyLevelList(muid){
		uni.request({
			url: uni.getStorageSync('api_url')+'/agencyLevel/getList/?acKey='+muid,
			complete: (result) => {
				uni.hideLoading();
				if(result.data.code != 1){
					uni.showToast({
						title:result.data.msg
					});
				}else{
						this.levellist = result.data.data.data;
				}
				
			},
		});
	},
	getTags(mcId){
		uni.request({
			url: uni.getStorageSync('api_url2')+'/main/getUserTags/?sId='+mcId,
			complete: (result) => {
				uni.hideLoading();
				if(result.data.code != 1){
					uni.showToast({
						title:result.data.msg
					});
				}else{
						result = result.data.data;
						var arr = []
						for (let i in result) {
						    let o = [];
							o = {'code':i,'name':result[i]};
							arr.push(o);
						}
						this.tags = arr;
				}
				
			},
		});
	},
	commitChange(muid){
		var arr = [];
		var mutags=[];
		for (let i in this.member_tags) {
		    let o = [];
			o = this.member_tags[i].code;
			arr.push(o);
		}
		mutags = JSON.stringify(arr);
		uni.request({
			url: uni.getStorageSync('api_url')+'/member/edit',
			method: 'post',
			data:{mcKey:this.mcKey,muId:muid,alId:this.memberData.alId,muNickName:this.memberData.muNickName,muSex:this.memberData.muSex,muMobile:this.memberData.muMobile,muMemo:this.memberData.muMemo,muTags:mutags},
			complete: (result) => {
				uni.hideLoading();
				if(result.data.code != 1){
					uni.showToast({
						title:result.data.msg
					});
				}else{
					uni.showToast({
						title: '修改成功',
						duration: 1000,
						success: function () {
							setTimeout(function(){
								 uni.switchTab({
									url:'/pages/members/members'
								 });
							},1000) 
							}
					});
				
				}
			},
		});
	}
    }
 };
</script>

<style scoped>
	.page.members{
		    width: 96%;
		    margin: 0 auto;
	}
	.marketing-consultant span{
		    background: linear-gradient(to right bottom,#ffffff,#b582b5,#c8ccc1,#9c87bf,#ffffff);
		    font-size: 0.8rem;
		    color: #FFFFFF;
		    padding: 5px;
	}
	.member-grade{
		font-size: 0.8rem;
		background: radial-gradient(#ec4fae, transparent);
		line-height: 0.8rem;
		display: inline-block;
	}
	.member-name{
		font-size: 0.8rem;
	}
	.member-details{
		margin-left: 3rem;
		flex-grow: 1;
	}
	.img-avatar{
		width: 3rem;
		height: 3rem;
		border-radius: 50%;
		margin-left: 1rem;
	}
	.add-members{
		       position: absolute;
		       right: 10px;
		       top: 5px;
		       font-size: 12px;
		       background: linear-gradient(to right bottom,#fb4386,#ec4fae,#ce63d0,#a377ea,#6488f9);
		       color: #ffffff;
	}

	.member-list{
		margin: 1.5rem 0;
		    border: 1px solid #6d1c79;
		    box-sizing: border-box;
			display: flex;
			padding: 20px 10px;
	}

    .location{
		width: 100%;
		background-color: #ffffff;
	}
	.location .search .content .content-box .icon{
		color:#6d1c79;
	}
	.uni-input-placeholder{
		font-size: 14px;
	}
	.search.button{
		font-size: 14px;
	}
	.results{
		text-align: center;
		color: red;
		font-size: 16px;
		margin: 20px auto;
	}
	.detail-actions uni-button {
	    font-size: 12px;
	    background: -webkit-gradient(linear,left top, right bottom,from(#fb4386),color-stop(#ec4fae),color-stop(#ce63d0),color-stop(#a377ea),to(#6488f9));
	    background: -o-linear-gradient(left top,#fb4386,#ec4fae,#ce63d0,#a377ea,#6488f9);
	    background: linear-gradient(to right bottom,#fb4386,#ec4fae,#ce63d0,#a377ea,#6488f9);
	    color: #ffffff;	
	}
	.member-box .submit-box uni-button {
		height:40px;
		line-height: 40px;
	}
	.member-box {
		    height: 60%;
		    border: 1px solid #ccc;
		    margin: 10px auto;
		    border-radius: 10px;
		    width: 96%;
	}
	.member-box img{
		width: 20px;
		height:20px;
		margin: 8px 10px 0px 0px;
	}
		
	.member-box .box-content {
		height: auto;
		overflow: scroll;
		max-height: 100%;
	}
	.member-box .submit-box {
		position: fixed;
	}
	.member-box .qty-box {
		padding: 0 8px;
	}
	.member-box .tc-box {
		margin-bottom: 40px;
		padding-right: 8px;
	}
	.member-box .qty-box .qty-title {
		float: left;
		line-height: 35px;
		height: 35px;
	}
	.member-box .qty-box uni-input {
		float: right;
		border: none;
	}
	.member-box .van-cell {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    line-height: 24px;
    position: relative;
    color: #323233;
    font-size: 14px;
    overflow: hidden;
    border-bottom: 1px solid #ccc;
	padding: 5px 30px 5px 20px;
	}
	.member-box .van-cell:last-child{
		border-bottom: none;
	}
	.member-box .van-cell_title {
		max-width: 90px;
		height:35px;
		line-height: 35px;
	}
	.member-box .van-cell_title, 
	.member-box .van-cell_value {
	    -webkit-box-flex: 1;
	    -webkit-flex: 1;
	    -moz-box-flex: 1;
	    flex: 1;
	}
	.member-box .van-cell_value {
		color: #969799;
		overflow: hidden;
		text-align: right;
		position: relative;
		vertical-align: middle;
	}
	.member-box .van-cell_select {
    overflow: hidden;
    text-align: right;
    position: relative;
    vertical-align: middle;
    height: 35px;
    width: 110px;
    color: #000;
    border-color: #6d1c79;
    background: #fff;
    border-radius: 10px;
	}
	.member-box uni-textarea {
		max-height: 50px;
		text-align: left;
		border: 1px solid #969799;
	}
	.member-box .van-field_body {
		display: -webkit-box;
		display: -webkit-flex;
		display: -moz-box;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-moz-box-align: center;
		align-items: center;
		height: 100%;
	}
	.member-box .van-field_body .van-field_control{
		border: none;
	}
	.member-box .van-field_control {
		border: 0;
		margin: 0;
		padding: 0;
		width: 100%;
		resize: none;
		display: block;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		background-color: transparent;
		text-align: left;
		height: 35px;
		line-height: 35px;
		border-radius: 0;
		font-size:14px;
	}
	.member-box .uni-textarea-placeholder{
		color:#ccc;
	}
	.member-box .van-cell-required:before {
		content: "*";
		position: absolute;
		left: 1px;
		font-size: 14px;
		color: #f44;
		top: 7px;
	}
	.member-box .uni-textarea-placeholder{
		color: #ccc;
	}
		
	.member-box .uni-input-input{
		color:red;
	}
	.member-box .notes{
		clear: both;
		padding: 5px 8px;
		border: 1px dashed #00c971;
		font-size: 14px;
	}
	.member-box .van-field_tc .van-field_control{
	
	}
	.member-box .van-field_tc  uni-button{
		border-bottom: none;
		border: 1px solid #ccc;
		text-align: center;
		border-radius: 5px;
		height: 34px;
		line-height: 34px;
		font-size: 14px;
		font-weight: normal;
		background: #fff;
		color: #000;
		padding: 0 8px;
		margin: 0;
	}
	.member-box .van-field_tc .tc_active {
		background: #00c971;
		color: #fff;
		border: 1px solid #00c971;
	}
	.c-submit{    
		background: rgb(109, 28, 121);
		color: #FFFFFF; 
		font-size: 14px;
	}
	.multiselect__option{
		    padding: 6px !important;
			min-height: 20px !important;
			font-size: 12px !important;
	}
</style>
